<script>
  import UseBarByMonth from './UseBarByMonth.vue'


  export default {
    name: 'UsePieByMonth',
    mixins: [UseBarByMonth],
    data() {
      return {
        chartOption: {
          title: {
            text: this.$t('analysis.UsingPieByMonth'),
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20
          },
          series: [{
            type: 'pie'
          }]
        }
      }
    },
    methods: {
      updateChart() {
        if (this.chart === null) {
          return
        }
        const {
          groupBy,
          valueType
        } = this
        const {
          list,
          map
        } = this.result
        list.forEach(item => {
          item.storage = item.deviceName + '_' + item.deviceIndex
        })
        const data = []
        for (var i = 0; i < list.length; i++) {
          const each = list[i]
          data.push({
            name: each[groupBy],
            value: each['minute-' + valueType]
          })
        }
        this.chart.setOption({
          series: [{
            name: this.valueType === 'sum' ? this.$t('analysis.StoreDurationPercent') : this.$t(
              'analysis.StoreCountPercent'),
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data
          }]
        });
      }
    }
  }

</script>
